<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-3">
				<div class="thumbnail">
					<img
						src="http://www.easyicon.net/api/resizeApi.php?id=1205863&size=128"
						class="img-circle">
					<div class="caption text-center">
						<h3>马云</h3>
						<p>
							<a href="#" class="btn btn-primary" role="button">账号设置</a> <a
								href="#" class="btn btn-default" role="button">退出登录</a>
						</p>
					</div>
				</div>

				<ul class="list-group text-center">
					<li class="list-group-item disabled">OA</li>
					<li class="list-group-item disabled">项目</li>
					<li class="list-group-item"><a href="main.html">通讯录</a></li>
					<li class="list-group-item"><a href="msg.html">消息</a></li>
					<li class="list-group-item disabled">日程</li>
					<li class="list-group-item disabled">通知</li>
				</ul>
			</div>
			<div class="col-md-3">
				<div class="panel-group text-center" id="accordion" role="tablist"
					aria-multiselectable="true">
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="headingOne">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion"
									href="#collapseOne" aria-expanded="true"
									aria-controls="collapseOne"> 北京投资部 </a>
							</h4>
						</div>
						<div id="collapseOne" class="panel-collapse collapse in"
							role="tabpanel" aria-labelledby="headingOne">
								<ul class="list-group text-center">
									<li class="list-group-item">董事会</li>
									<li class="list-group-item">行政部</li>
								</ul>
						</div>
					</div>
					<div class="panel panel-default">
						<div class="panel-heading" role="tab" id="heading2">
							<h4 class="panel-title">
								<a data-toggle="collapse" data-parent="#accordion"
									href="#collapse2" aria-expanded="true"
									aria-controls="collapse2"> 北京投资部 2</a>
							</h4>
						</div>
						<div id="collapse2" class="panel-collapse collapse in"
							role="tabpanel" aria-labelledby="heading2">
								<ul class="list-group text-center">
									<li class="list-group-item">董事会2</li>
									<li class="list-group-item">行政部2</li>
									<li class="list-group-item">行政部3</li>
								</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<table class="table table-striped table-hover">
				<thead>
					<tr>
						<td>姓名</td>
						<td>电话号码</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>刘强东</td>
						<td>18888888888</td>
						<td>发起聊天</td>
					</tr>
					<tr>
						<td>刘强东</td>
						<td>18888888888</td>
						<td>发起聊天</td>
					</tr>
					<tr>
						<td>刘强东</td>
						<td>18888888888</td>
						<td>发起聊天</td>
					</tr>
					<tr>
						<td>刘强东</td>
						<td>18888888888</td>
						<td>发起聊天</td>
					</tr>
					<tr>
						<td>刘强东</td>
						<td>18888888888</td>
						<td>发起聊天</td>
					</tr>
				</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>